<template>
  <div>
    <el-row class="mb-4">
      <el-button @click="ClickMe()">Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success" disabled>Success</el-button>
      <el-button type="info" disabled>Info</el-button>
      <el-button type="warning" disabled>Warning</el-button>
      <el-button type="danger" disabled>Danger</el-button>
    </el-row>

    <el-row>
      <el-button plain>Plain</el-button>
      <el-button type="primary" plain>Primary</el-button>
      <el-button type="success" plain disabled>Success</el-button>
      <el-button type="info" plain disabled>Info</el-button>
      <el-button type="warning" plain disabled>Warning</el-button>
      <el-button type="danger" plain disabled>Danger</el-button>
    </el-row>
    {{ userName }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: "Jock_Fang",
    };
  },
  methods: {
    ClickMe() {
      alert("Hello world!");
    },
  },
};
</script>

<style></style>
